<template>
  <div class="app-container">
    <!-- 侧边栏 -->
    <div class="sidebar">
      <div class="sidebar-header">
        <h2>在线教育平台</h2>
      </div>
      <nav>
        <ul>
          <li @click="navigateTo('/myclass')">我的课程</li>
          <li @click="navigateTo('/stuhome')">全部课程</li>
          <li @click="navigateTo('/question')">我的提问</li>
          <li @click="navigateTo('/stuper')" class="active">个人中心</li>
        </ul>
      </nav>
    </div>

    <!-- 主内容 -->
    <main class="main-content">
      <h1 class="page-title">个人中心</h1>

      <!-- 用户信息卡片 -->
      <div class="user-card">
        <div class="avatar-container">
          <img :src="userInfo.avatar" alt="用户头像" class="avatar">
          <button @click="showAvatarDialog">更换头像</button>
        </div>

        <div class="user-info">
          <h2>{{ userInfo.name }}</h2>
          <p>{{ userInfo.email }}</p>
          <button @click="showEditInfoDialog">编辑信息</button>
        </div>

        <div class="stats">
          <div class="stat-item">
            <div class="stat-value">{{ userInfo.courseCount }}</div>
            <div class="stat-label">学习课程</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ userInfo.questionCount }}</div>
            <div class="stat-label">提问数量</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ userInfo.answerCount }}</div>
            <div class="stat-label">获得回答</div>
          </div>
          <div class="stat-item">
            <div class="stat-value">{{ userInfo.likeCount }}</div>
            <div class="stat-label">获赞数量</div>
          </div>
        </div>
      </div>
    </main>

    <!-- 对话框 -->
    <div v-if="avatarDialogVisible" class="dialog-overlay">
      <div class="dialog">
        <h3>更换头像</h3>
        <div class="avatar-upload">
          <img v-if="uploadingAvatarUrl" :src="uploadingAvatarUrl" alt="预览头像" class="preview">
          <input type="file" @change="handleFileUpload" accept="image/*">
          <p>支持JPG、PNG格式，最大2MB</p>
        </div>
        <div class="dialog-actions">
          <button @click="avatarDialogVisible = false">取消</button>
          <button @click="saveAvatar">保存</button>
        </div>
      </div>
    </div>

    <div v-if="editInfoDialogVisible" class="dialog-overlay">
      <div class="dialog">
        <h3>编辑个人信息</h3>
        <form @submit.prevent="saveEditInfo">
          <div class="form-group">
            <label>用户名</label>
            <input v-model="editUserInfo.name" type="text">
          </div>
          <div class="form-group">
            <label>邮箱</label>
            <input v-model="editUserInfo.email" type="email">
          </div>
          <div class="form-group">
            <label>手机号</label>
            <input v-model="editUserInfo.phone" type="tel">
          </div>
          <div class="dialog-actions">
            <button @click="editInfoDialogVisible = false">取消</button>
            <button type="submit">保存</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue'

// 导航函数
const navigateTo = (path) => {
  console.log(`导航到: ${path}`)
  // 实际项目中这里会使用路由
}

// 用户数据
const userInfo = reactive({
  name: '张三',
  email: 'zhangsan@example.com',
  avatar: 'https://picsum.photos/100/100?random=user',
  courseCount: 5,
  questionCount: 12,
  answerCount: 8,
  likeCount: 45
})

// 对话框状态
const avatarDialogVisible = ref(false)
const editInfoDialogVisible = ref(false)
const uploadingAvatarUrl = ref('')
const editUserInfo = reactive({})

onMounted(() => {
  // 初始化编辑信息表单
  Object.assign(editUserInfo, userInfo)
})

// 头像上传相关
const showAvatarDialog = () => {
  uploadingAvatarUrl.value = userInfo.avatar
  avatarDialogVisible.value = true
}

const handleFileUpload = (event) => {
  const file = event.target.files[0]
  if (file) {
    const reader = new FileReader()
    reader.onload = (e) => {
      uploadingAvatarUrl.value = e.target.result
    }
    reader.readAsDataURL(file)
  }
}

const saveAvatar = () => {
  if (uploadingAvatarUrl.value) {
    userInfo.avatar = uploadingAvatarUrl.value
    avatarDialogVisible.value = false
    alert('头像更新成功')
  }
}

// 编辑个人信息
const showEditInfoDialog = () => {
  Object.assign(editUserInfo, userInfo)
  editInfoDialogVisible.value = true
}

const saveEditInfo = () => {
  Object.assign(userInfo, editUserInfo)
  editInfoDialogVisible.value = false
  alert('个人信息更新成功')
}
</script>

<style scoped>
/* 基础样式 */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

.app-container {
  display: flex;
  height: 100vh;
}

/* 侧边栏样式 */
.sidebar {
  width: 220px;
  background-color: #0b1b33;
  color: white;
}

.sidebar-header {
  padding: 15px;
  border-bottom: 1px solid #1f334b;
}

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

nav ul li {
  padding: 15px;
  cursor: pointer;
  border-left: 3px solid transparent;
}

nav ul li:hover,
nav ul li.active {
  background-color: #1f334b;
  border-left-color: #409EFF;
}

/* 主内容样式 */
.main-content {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
}

.page-title {
  margin-top: 0;
}

/* 用户卡片样式 */
.user-card {
  background-color: white;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  padding: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.avatar-container {
  text-align: center;
  margin-bottom: 20px;
}

.avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}

.avatar-container button {
  background-color: #409EFF;
  color: white;
  border: none;
  border-radius: 4px;
  padding: 8px 16px;
  cursor: pointer;
}

.user-info {
  text-align: center;
  margin-bottom: 20px;
}

.user-info button {
  background: none;
  border: none;
  color: #409EFF;
  cursor: pointer;
  text-decoration: underline;
}

.stats {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
}

.stat-item {
  text-align: center;
  padding: 10px;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
}

.stat-label {
  color: #666;
  font-size: 14px;
}

/* 对话框样式 */
.dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.dialog {
  background-color: white;
  border-radius: 8px;
  padding: 20px;
  width: 400px;
  max-width: 90%;
}

.dialog h3 {
  margin-top: 0;
}

.avatar-upload {
  text-align: center;
  margin-bottom: 20px;
}

.preview {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 10px;
}

.dialog-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.dialog-actions button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.dialog-actions button:first-child {
  background-color: #eee;
  color: #333;
}

.dialog-actions button:last-child {
  background-color: #409EFF;
  color: white;
}

/* 表单样式 */
.form-group {
  margin-bottom: 15px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}
</style>
